$(function () {
  // 循环渲染内容
  // time 停止的条件要减1 renderSite 渲染的地方  renderContent 渲染的内容 要显示索引值必须是xx才可以变
  // let inexistence = $('inexistence')
  function renderLoop(time, renderSite, renderContent) {
    let arr = []
    let arr1 = []

    for (num = 0; num <= time; num++) {
      arr.push(num)
    }
    for (let i = 0; ; i++) {
      if (i > time) {
        break
      }
      arr1.push(renderContent)

      // 查看renderContent 中有没有xx有就变成 `${arr[i]+1}`
      renderContent1 = (renderContent + '').replace(/xx/g, `${arr[i] + 1}`)
      renderContent2 = (renderContent1 + '').replace(/yy/g, `height`)
      renderSite.append(renderContent2)

      // renderSite.append(renderContent1)
    }
    return arr1
  }

  let booksSynopsis = `
  <div class="books-synopsis">
    <span class="books-quantity">xx</span>
    <p>就喜欢你看不惯我 又干不</p>
    <div class="show">
      <img src="./img/index08_05.jpg" alt="">
      <span>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐，1500万次转发，超4亿次阅读</span>
    </div>
  </div>
  `

  let dd = `
  <li>
  <img src="./img/index25_12.jpg" alt="">
  <p class="promotion-synopsis">Pigeon法国制奶嘴，无毒天然乳胶</p>
  <p class="promotion-price">￥:189</p>
  <p class="promotion-evaluate"> <span class="iconfont icon-xiaoxi"></span>已有<span>988</span>条评价</p>
  </li>
`

  let aa = `
<li class="flexbetween">
<img src="./img/product_list _01.jpg" alt="">
<span class="index">xx</span>
<div class="goods-content">《三体》刘慈欣一场科幻的史诗风暴</div>
</li>
`

  let bb = `
    <li>
      <img src="./img/product_list _03.jpg" alt="">
      <p class="author">查理 斯密斯</p>
      <p class="publisher">中国邮电出版社</p>
      <p><span class="original-cost">￥49</span><span class="discount">￥79</span></p>
    </li>
  `

  let cc = `
  <li class="flexbetween yy">
    <img src="./img/product_list _01.jpg" alt="">
    <span class="index">xx</span>
    <div class="goods-content">《三体》刘慈欣一场科幻的史诗风暴</div>
  </li>
  `

  // 循环渲染新书畅销榜
  renderLoop(7, $('#books .content2'), booksSynopsis)
  // 循环渲染热卖畅销
  renderLoop(6, $('#goodsCategory .content'), cc)
  // 图书 电子书轮播图
  banner($('.bannerInner2'), 220, 336, 220)
  // 第一次循环渲染 图书电子书li
  renderLoop(4, $('#books .content3'), bb)
  // 克隆渲染图书电子书内容
  $('.details-left').append($('#books .content3').clone())
  // 第一次循环渲染推广商品内容li
  renderLoop(4, $('#promotionOfGoods .content'), dd)
  // 克隆渲染推广商品内容ul
  $('.promotion-content').append($('.promotion-content ul').clone())
  // 克隆渲染推广商品内容
  $('#promotionOfGoods .content2').append($('.promotion-content').clone())

  // 手风琴
  // site 要执行手风琴的对象 show要显示与隐藏的对象 其他兄弟elsehinde index 到一个值显示与隐藏border-bottom lastTag border-bottom 显示的标签
  function accordion(site, show, elsehinde, index, lastTag) {
    site.click(function () {
      $(this).find(show).show()
      if ($(this).index() === index) {
        $(this).find(lastTag).css('border-bottom', '1px solid #ccc')
      } else {
        $(this).closest('.content2').find('>div:last-child p').css('border-bottom', '')
      }
      $(this).siblings(elsehinde).find(show).hide()
    })
  }
  // 新书畅销榜手风琴
  accordion($('.books-synopsis'), '.show', '.books-synopsis', 7, 'p')

  // 在点击事件之前删除类名 height
  $('#goodsCategory .content li:gt(0)').removeClass('height')
  // 热卖畅销手风琴
  // site 要执行手风琴的对象 show要显示与隐藏的类名 其他兄弟elsehinde
  function accordion1(site, show, elsehinde) {
    site.click(function () {
      $(this).siblings(elsehinde).removeClass(show)
      $(this).addClass(show)
    })
  }
  accordion1($('#goodsCategory .flexbetween'), 'height', 'li')

  // 最新上架 独家畅 销电子书 激活
  $('.repetitio').on('click', '.title-rigth div', function () {
    $(this).addClass('on')
    $(this).siblings('div').removeClass('on')
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .show()
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .siblings('div')
      .hide()
  })

  $('.books').on('click', '.books-rigth div', function () {
    $(this).addClass('on')
    $(this).siblings('div').removeClass('on')
    $(this)
      .closest('.books')
      .find('.shower')
      .find(`table:eq(${$(this).index()})`)
      .show()
    $(this)
      .closest('.books')
      .find('.shower')
      .find(`table:eq(${$(this).index()})`)
      .siblings('table')
      .hide()
  })

  //  推广商品
  $('#promotionOfGoods').on('click', 'p', function () {
    $(this).addClass('on')
    $(this).siblings('p').removeClass('on')
    $(this)
      .closest('#promotionOfGoods')
      .find(`.show-hidden:eq(${$(this).index()})`)
      .show()
    console.log(1)
    $(this)
      .closest('#promotionOfGoods')
      .find(`.show-hidden:eq(${$(this).index()})`)
      .siblings('div')
      .hide()
    console.log(2)
  })

  // 轮播图
  function banner(bannerInner, boxh, w, h) {
    $(bannerInner).tyslide({
      boxh, //盒子的高度
      w, //盒子的宽度
      h, //图片的高度
      isShow: true, //是否显示控制器
      isShowBtn: true, //是否显示左右按钮
      controltop: 40, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 24, //控制按钮宽度
      controlsH: 24, //控制按钮高度
      radius: 12, //控制按钮圆角度数
      controlsColor: '#d7d7d7', //普通控制按钮的颜色
      controlsCurrentColor: '#ff6600', //当前控制按钮的颜色
      isShowNum: true //是否显示数字
    })
  }
  // 主轮播图
  banner($('#bannerInner'), 460, 1000, 400)

  for (let g = 0; ; g++) {
    let gg = ['图书', '电子书', '原创文学', '服装', '运动户外', '孕婴童', '家居', '创意文具', '地方特产', '电器城']
    if (g > 9) {
      break
    }
    if (g === 3) {
      $('#head .nav .content').append(`<a href="./product_list .html">${gg[g]}</a>`)
    }
    $('#head .nav .content').append(`<a href="#">${gg[g]}</a>`)
  }

  // 描点链接
  $('.floor li')
    .hover(
      function () {
        let bgcolor = $(this).data('bgc')
        $(this).css({
          backgroundColor: bgcolor,
          backgroundPositionX: -40,
          width: 80
        })
      },
      function () {
        $(this).css({
          backgroundColor: '',
          backgroundPositionX: 0,
          width: 40
        })
      }
    )
    .on('click', function () {
      //获取当前floor下Li的索引值
      let index = $(this).index()
      let sTop = $('.floor-box').eq(index).offset().top
      $('html, body').animate({ scrollTop: sTop }, 300)
    })

  // 回到顶部
  $(window).on('scroll', function () {
    if ($('html, body').scrollTop() > 700) {
      $('.search').appendTo('.fix-top')
      $('.tophead').show()
      $('.fix-top').show()
      $('.search input').css({
        left: 500,
        top: 5
      })
      $('.search .search-btn').css({
        left: 906,
        top: 5
      })
    } else {
      $('.fix-top').hide()
      $('.tophead').hide()
      $('.search').appendTo('.shop')
      $('.search input').css({
        left: -476,
        top: 0
      })
      $('.search .search-btn').css({
        left: -72,
        top: 2
      })
    }
  })

  $('.tophead').click(function () {
    $('html, body').animate({ scrollTop: 0 }, 300)
  })

  // 要改变的内容
  let repetitio = $('.Childrens-wear .repetitio')
  repetitio.each(function (index) {
    if (index === 0) {
      $(this).find('h2').html('户外运动').closest('.repetitio').find('.left img').attr('src', './img/index5_01.jpg').closest('.repetitio').find('.shower img').attr('src', './img/index5_02.jpg')
    } else if (index === 1) {
      $(this)
        .find('h2')
        .html('童装 童鞋 婴儿装')
        .closest('.repetitio')
        .find('.left img')
        .attr('src', './img/index5_03.jpg')
        .closest('.repetitio')
        .find('.shower img')
        .attr('src', './img/index5_04.jpg')
    }
  })

  $('#promotionOfGoods .content2').find('.promotion-price').html('￥:99')
})
